<template>
  <div class="digits" id="digits" v-html="html"></div>
</template>

<script>
export default {
  props: {
    number: {
      type: Number,
      default: 0,
    },
  },
  data() {
    return {
      html: "",
    };
  },
  watch: {
    number(val) {
      this.clocknum(val);
    },
  },
  mounted() {
    this.clocknum(this.number);
  },
  methods: {
    clocknum(num) {
      var html = "";
      var strarr = num.toString().split("");
      var digit_to_name =
        "zero one two three four five six seven eight nine".split(" ");
      for (var i = 0; i < strarr.length; i++) {
        if (strarr[i] == ".") {
          html += '<div class="dot"></div>';
        } else {
          var clasname = digit_to_name[strarr[i]];
          html +=
            '<div class="' +
            clasname +
            '">' +
            '<span class="d1"></span>' +
            '<span class="d2"></span>' +
            '<span class="d3"></span>' +
            '<span class="d4"></span>' +
            '<span class="d5"></span>' +
            '<span class="d6"></span>' +
            '<span class="d7"></span>' +
            "</div>";
        }
      }
      this.html = html;
    },
  },
};
</script>

<style scoepd lang="scss">
$width: 14px;
$height: 25px;
.digits {
  div {
    text-align: left;
    position: relative;
    width: $width;
    height: $height;
    display: inline-block;
    margin: 0 2px;
  }
  div span {
    background-color: #272e38;
    border-color: #272e38;
  }
  div span {
    opacity: 0;
    position: absolute;
    -webkit-transition: 0.25s;
    -moz-transition: 0.25s;
    transition: 0.25s;
  }
  div span:before,
  div span:after {
    content: "";
    position: absolute;
    width: 0;
    height: 0;
    border: 2px solid transparent;
  }

  .d1 {
    height: 2px;
    width: 8px;
    top: 0;
    left: 3px;
  }
  .d1:before {
    border-width: 0 2px 2px 0;
    border-right-color: inherit;
    left: -2px;
  }
  .d1:after {
    border-width: 0 0 2px 2px;
    border-left-color: inherit;
    right: -2px;
  }

  .d2 {
    height: 2px;
    width: 8px;
    top: 12px;
    left: 3px;
  }
  .d2:before {
    border-width: 1px 2px 1px;
    border-right-color: inherit;
    left: -4px;
  }
  .d2:after {
    border-width: 1px 2px 1px;
    border-left-color: inherit;
    right: -4px;
  }

  .d3 {
    height: 2px;
    width: 8px;
    top: 24px;
    left: 3px;
  }
  .d3:before {
    border-width: 2px 2px 0 0;
    border-right-color: inherit;
    left: -2px;
  }
  .d3:after {
    border-width: 2px 0 0 2px;
    border-left-color: inherit;
    right: -2px;
  }

  .d4 {
    width: 2px;
    height: 7px;
    top: 3px;
    left: 0;
  }
  .d4:before {
    border-width: 0 2px 2px 0;
    border-bottom-color: inherit;
    top: -2px;
  }
  .d4:after {
    border-width: 0 0 2px 2px;
    border-left-color: inherit;
    bottom: -2px;
  }

  .d5 {
    width: 2px;
    height: 7px;
    top: 3px;
    right: 0;
  }
  .d5:before {
    border-width: 0 0 2px 2px;
    border-bottom-color: inherit;
    top: -2px;
  }
  .d5:after {
    border-width: 2px 0 0 2px;
    border-top-color: inherit;
    bottom: -2px;
  }

  .d6 {
    width: 2px;
    height: 7px;
    top: 16px;
    left: 0;
  }
  .d6:before {
    border-width: 0 2px 2px 0;
    border-bottom-color: inherit;
    top: -2px;
  }
  .d6:after {
    border-width: 0 0 2px 2px;
    border-left-color: inherit;
    bottom: -2px;
  }

  .d7 {
    width: 2px;
    height: 7px;
    top: 16px;
    right: 0;
  }
  .d7:before {
    border-width: 0 0 2px 2px;
    border-bottom-color: inherit;
    top: -2px;
  }
  .d7:after {
    border-width: 2px 0 0 2px;
    border-top-color: inherit;
    bottom: -2px;
  }

  /* 1 */
  div.one .d5,
  div.one .d7 {
    opacity: 1;
  }

  /* 2 */
  div.two .d1,
  div.two .d5,
  div.two .d2,
  div.two .d6,
  div.two .d3 {
    opacity: 1;
  }

  /* 3 */
  div.three .d1,
  div.three .d5,
  div.three .d2,
  div.three .d7,
  div.three .d3 {
    opacity: 1;
  }

  /* 4 */
  div.four .d5,
  div.four .d2,
  div.four .d4,
  div.four .d7 {
    opacity: 1;
  }

  /* 5 */
  div.five .d1,
  div.five .d2,
  div.five .d4,
  div.five .d3,
  div.five .d7 {
    opacity: 1;
  }

  /* 6 */
  div.six .d1,
  div.six .d2,
  div.six .d4,
  div.six .d3,
  div.six .d6,
  div.six .d7 {
    opacity: 1;
  }

  /* 7 */
  div.seven .d1,
  div.seven .d5,
  div.seven .d7 {
    opacity: 1;
  }

  /* 8 */
  div.eight .d1,
  div.eight .d2,
  div.eight .d3,
  div.eight .d4,
  div.eight .d5,
  div.eight .d6,
  div.eight .d7 {
    opacity: 1;
  }

  /* 9 */
  div.nine .d1,
  div.nine .d2,
  div.nine .d3,
  div.nine .d4,
  div.nine .d5,
  div.nine .d7 {
    opacity: 1;
  }

  /* 0 */
  div.zero .d1,
  div.zero .d3,
  div.zero .d4,
  div.zero .d5,
  div.zero .d6,
  div.zero .d7 {
    opacity: 1;
  }

  /* dot */
  div.dot {
    width: 5px;
  }
  .dot:after {
    width: 5px;
    height: 5px;
    content: "";
    position: absolute;
    left: 0;
    bottom: 0px;
    background-color: #272e38;
  }
}
</style>
